<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 节点(文档节点  元素节点 属性节点 文本节点 注释节点)


    // HTML DOM


    // 查
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // parentEle.getElementsByClassName()
    // parentEle.getElementsByTagName()

    // document.querySelector()
    // document.querySelectorAll()

    // 层级查找
    // parentNode    父节点
    // parentElement 父元素

    // childNodes    子节点
    // children    子元素

    // firstChild          第一个子节点
    // firstElementChild   第一个子元素

    // lastChild          最后一个子节点
    // lastElementChild   最后一个子元素

    // previousSibling     前一个同胞节点
    // previousElementSibling   前一个同级元素

    // nextSibling     前一个同胞节点
    // nextElementSibling   前一个同级元素


    // 节点的增删改

    // document.createElement()      新增元素节点

    // parent.appendChild(node)      追加(放在父元素所有内容的最后放)
    // parent.append(node | string)  追加
    // parent.prepend(node | string) 预追加

    // parent.insertBefore(newNode,oldNode)

    // node.remove()
    // parent.removeChild(node)

    // parent.replaceChild(newNode,oldNode)

    // node.cloneNode(true/false)





</script>

</html>